import React from "react";
//导入 useState 函数
import { useState } from "react";

export default function StateCom() {
  //声明状态   [a, b] = [1, 100]
  // let result = React.useState(100);//实参是状态的初始值, 返回值是一个数组
  let [count, setCount] = useState(100); //实参是状态的初始值, 返回值是一个数组, 数组的第一个值为状态值, 第二个值为更新状态的函数
  let [count2, setCount2] = useState(10000);

  //输出
  console.log('run run run');

  //声明 minus 函数
  let minus = () => {
    //自减
    setCount(count - 1);
  };

  //声明 add 函数
  let add = () => {
    //调用更新状态的函数
    setCount(count + 1);
  };

  //声明 change 函数
  let change = () => {
    //调用 setCount
    setCount(count);
  }

  //
  let batch = () => {
    //更新两个状态的值  合并更新
    setCount(count + 1);
    setCount2(count2 + 1);
  }

  //返回虚拟 DOM 对象
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={add}>新增</button>
      <button onClick={minus}>减小</button>
      <button onClick={change}>改变</button>
      <hr></hr>
      <h2>{count2}</h2>
      <button onClick={batch}>批量</button>
    </div>
  );
}
